<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>api</title>
<script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.min.js"></script>
</head>
<body>
    <button id="btnGET">GET</button>
    <button id="btnPOST">POST</button>
    <button id="btnDel">Del</button>
    <button id="btnJsonp">Jsonp</button>
</body>
<script>
    // 测试get请求
$('#btnGET').on('click',function(){
    $.ajax({
        type:'GET',
        url:'http://127.0.0.1:8080/api/get',
        data:{
            name:'lwq',
            age:20
        },
        success:function(res){
            console.log(res);
        }
    })
})
    //测试post请求
    $('#btnPOST').on('click',function(){
    $.ajax({
        type:'POST',
        url:'http://127.0.0.1:8080/api/post',
        data:{
            name:'lwq',
            age:20
        },
        success:function(res){
            console.log(res);
        }
    })
})

//测试DELETE请求
$('#btnDel').on('click',function(){
    $.ajax({
        type:'DELETE',
        url:'http://127.0.0.1:8080/api/del',
        success:function(res){
            console.log(res);
        }
    })
})

// CORS跨域资源共享
// 接口的跨域问题
// 刚才编写的GET和POST接口，存在一个很严重的问题:不支持跨域请求。
// 解决接口跨域问题的方案主要有两种:
// CORS(主流的解决方案，推荐使用)
// JSONP(有缺陷的解决方案:只支持GET请求)

//测试jsonp请求 
$('#btnJsonp').on('click',function(){
    $.ajax({
        type:'GET',
        url:'http://127.0.0.1:8080/api/jsonp',
        dataType:'jsonp',// 必须
        success:function(res){
            console.log(res);
        }
    })
})

</script>
</html>